<script setup lang="ts">
import { ref, watch } from 'vue'
import VueOfficeDocx from '@vue-office/docx';
// import VueOfficeExcel from '@vue-office/excel';
// import VueOfficePdf from '@vue-office/pdf';

// docx-preview 预览报错，vue-video-player也有问题，所以音视频预览直接用原生标签就行了
// https://view.xdocin.com/view?src=你的文档地址 ，可以预览word文件，只能是公网的在线文件

const props = defineProps<{
	visible: boolean
	type: 'pdf' | 'img' | 'video' | 'word' | 'word-office' 
	url?:string
}>()



watch(
	() => props.visible,
	(nv) => {
		if (nv) {
			
		}
	}
)

defineEmits(['close'])

defineExpose({

})
</script>

<script lang="ts">
const files = ref(['http://localhost:5000/videos/1.mp4', 'http://localhost:5000/pdfs/test1.pdf', 'http://localhost:5000/imgs/1.jpeg','http://localhost:5000/words/1.doc','http://localhost:5000/words/2.docx',`${import.meta.env.VITE_BASE_URL}/words/1.doc`,`${import.meta.env.VITE_BASE_URL}/words/2.docx`,'http://localhost:5000/excels/1.xls','https://ebidfiles.hyebid.cn/downtemp/cab350600/8701B34C032874AF347C2C6FA5A8D558_1.pdf'])
</script>

<template>
	<a-modal  :visible="visible" title="预览" centered :footer="null" width="80%" @cancel="$emit('close')" 
	:bodyStyle="{maxHeight:'88vh',overflow:'auto'}" 
	>
	<!-- maxHeight:'70vh' -->
		<iframe v-if="type == 'pdf'" :src="url" frameborder="0" class="pdf"></iframe>
		
    <iframe v-if="type == 'word'" :src ="`https://view.xdocin.com/view?${url}`" frameborder="0" class="pdf"></iframe>
    
		<!-- 只支持预览docx，预览非线上地址会跨域，此时要做好路径处理；线上地址则不会 -->
		<vue-office-docx
					v-if="type == 'word-office'"
					:src="url" 
					@rendered="()=>{}"
					@error="()=>{}"
				/>
		<video v-if="type == 'video'" :src="url" controls ></video>
    <a-image v-if="type == 'img'" :src="url" class="image" />
	</a-modal>
</template>

<style scoped lang="less">
.pdf{
  min-height: 80vh;
  width: 100%;
}
</style>
